<template>
	<view>
		<view class="header">
			<view class="statusBar" :style="{width: screenWidth+'px', height: headerHight+'px'}"></view>
			<view class="headLeader" :style="{width: screenWidth+'px', height: headerHight*1.3+'px'}">
				<view class="chatWith">
					聊天列表
				</view>
			</view>
		</view>
		
		<view class="mainPage" :style="{width: screenWidth+'px', height: screenHieght-headerHight-50+'px'}">
			<view class="list" :style="{width: screenWidth+'px'}">
				<view class="everChat" v-for="(item, index) in list" :key="index" @click="chatWith(item)">
					<view class="head">
						<view class="dot" :style="{opacity: item.msgCount==0?'0':'1'}">
							{{item.msgCount}}
						</view>
						<u-avatar :src="item.avatar" shape="square" :size="100" style="border: 2upx solid white;margin-bottom: 18px;"></u-avatar>
					</view>
					<view class="infoBox" :style="{width: screenWidth*0.8+'px'}">
						<view class="nickname">
							{{item.nickname}}
						</view>
						<view class="newMsg">
							{{item.newMsg}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		data(){
			return {
				screenHieght: 0,
				screenWidth: 0,
				headerHight: 0,
			}
		},
		methods:{
			chatWith(item){
				let info = {
					avatar: item.avatar,
					id: item.userId,
					introduce: '与你聊天的对象',
					nickname: item.nickname,
					school: '西南石油大学',
					userName: 'root',
				}
				item.msgCount = 0
				item.isRead = true
				uni.navigateTo({
					url:'/pages/components/chatPage?info='+encodeURIComponent(JSON.stringify(info))
				})
			}
		},
		computed:{
			...mapState({
				list: state => state.loginUser.msgList
			})
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.screenHieght = res.screenHeight
					this.screenWidth = res.screenWidth
					this.headerHight = res.statusBarHeight
				}
			})
		},
		onLoad() {

		}
	}
</script>

<style scoped>
	.statusBar{
	}
	.header{
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: white;
	}
	.back{
		margin-left: 30upx;
	}
	.chatWith{
		color: dodgerblue;
	}
	.headLeader{
		width: 100%;
		font-size: 1rem;
		font-weight: 500;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.mainPage{
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.list{
		margin: 0 auto;
		height: 800px;
	}
	.everChat{
		height: 130upx;
		width: 100%;
		padding: 15upx 30upx 15upx 30upx;
	}
	.infoBox{
		height: 100upx;
		padding-left: 20upx;
		display: flex;
		flex-direction: column;
	}
	.everChat{
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	.nickname{
		color: black;
		font-size: 1rem;
		font-weight: bold;
		height: 60upx;
	}
	.newMsg{
		font-size: 0.8rem;
		width: 90%;
		height: 1rem;
		display: -webkit-box;
		margin-top: 5upx;
		word-wrap:break-word;
		word-break: break-all;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
		color: rgba(122, 122, 122, 1.0);
	}
	.dot{
		width: 35upx;
		min-height: 35upx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		background-color: red;
		font-size: 0.6rem;
		position: relative;
		left: 45px;
		z-index: 700;
		top: 24upx;
	}
</style>